<template>
	<div>
		<el-card>
			<!--搜索 -->
			<el-form
				:inline="true"
				:model="formInline"
				class="demo-form-inline"
			>
				<el-form-item label="订单号">
					<el-input
						v-model="formInline.orderNo"
						placeholder="订单号"
					></el-input>
				</el-form-item>
				<el-form-item label="收货人">
					<el-input
						v-model="formInline.consignee"
						placeholder="收货人"
					></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input
						v-model="formInline.phone"
						placeholder="手机号"
					></el-input>
				</el-form-item>
				<el-form-item label="订单状态">
					<el-select
						v-model="formInline.orderState"
						placeholder="活动区域"
					>
						<el-option label="已完成" value="已完成"></el-option>
						<el-option label="派送中" value="派送中"></el-option>
						<el-option label="已接单" value="已接单"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择时间">
					<!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
					<el-date-picker
						v-model="formInline.date"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="handleOrderList"
						>查询</el-button
					>
				</el-form-item>
			</el-form>

			<!-- 表格数据 -->

			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="orderNo" label="订单号" width="150">
				</el-table-column>
				<el-table-column label="下单时间" width="120">
					<template slot-scope="{ row }">
						<span>{{ row.orderTime | formatYMDhms }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="手机号" width="120">
				</el-table-column>
				<el-table-column prop="consignee" label="收货人" width="120">
				</el-table-column>
				<el-table-column
					prop="deliverAddress"
					label="配送地址"
					width="300"
				>
				</el-table-column>
				<el-table-column
					prop="deliveryTime"
					label="送达时间"
					width="120"
				>
					<template slot-scope="{ row }">
						<span>{{ row.deliveryTime | formatYMDhms }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="remarks" label="用户备注" width="120">
				</el-table-column>
				<el-table-column
					prop="orderAmount"
					label="订单金额"
					width="120"
				>
				</el-table-column>
				<el-table-column prop="orderState" label="订单状态" width="120">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="{row}">
						<el-button
							@click="handleClick(row.id)"
							type="text"
							size="small"
							>查看</el-button
						>
						<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination
				class="my-15"
				:current-page="currentPage"
				:page-sizes="[5, 10, 15]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</el-card>

		<!-- 抽屉 -->

		<el-drawer
			title="订单修改"
			:visible.sync="drawer"
			:wrapperClosable="false"
		>
			<el-form label-width="80px" :model="drawerData">
				<el-form-item label="订单号">
					<el-input :disabled="true" type="text" v-model="drawerData.orderNo"></el-input>
				</el-form-item>
				<el-form-item label="下单时间">
					<!-- <el-input type="text" v-model="drawerData.orderTime"></el-input> -->
					<span>{{drawerData.orderTime|formatYMDhms}}</span>
				</el-form-item>	
				<el-form-item label="手机号">
					<el-input type="text" v-model="drawerData.phone"></el-input>
				</el-form-item>
				<el-form-item label="收货人">
					<el-input v-model="drawerData.consignee"></el-input>
				</el-form-item>
				<el-form-item label="配送地址">
					<el-input v-model="drawerData.deliverAddress"></el-input>
				</el-form-item>
				<el-form-item label="送达时间">
					
					<el-date-picker
						v-model="drawerData.deliveryTime"
							type="datetime"
							placeholder="选择日期时间"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="用户备注">
					<el-input v-model="drawerData.remarks"></el-input>
				</el-form-item>
				<el-form-item label="订单金额">
					<el-input v-model="drawerData.orderAmount"></el-input>
				</el-form-item>
				<el-form-item label="订单状态">
					<el-input v-model="drawerData.orderState"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="drawer = false">取消</el-button>
					<el-button
						type="success"
						class="fff gree"
						@click="handleConfirm"
						>确认</el-button
					>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	import { api_order_list,api_order_edit } from "@/apis/order";
import { formatYMDhms } from '@/filters/getTime';

	export default {
		data() {
			return {
				formInline: {
					orderNo: "",
					consignee: "",
					phone: "",
					orderState: "",
					date: [],
				},
				formData: {},
				currentPage: 1,
				pageSize: 5,
				total: 0,
				drawer: false,
				tableData: [
					// {
					// 	orderNo: "订单号",
					// 	orderTime: "下单时间",
					// 	phone: "电话",
					// 	consignee: "收货人",
					// 	deliverAddress: "送货地址",
					// 	deliveryTime: "送达时间",
					// 	remarks: "备注",
					// 	orderAmount: "订单金额",
					// 	orderState: "订单状态",
					// },
				],
				drawerData: {},
			};
		},
		created() {
			this.getOrderList();
		},
		methods: {
			async getOrderList() {
				let date = JSON.stringify(this.formData.date || "");
				const res = await api_order_list({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					...this.formData, //查询表单数据
					date,
					// date: this.formData.date
					// 	? JSON.stringify(this.formData.date)
					// 	: JSON.stringify([]),
				});
				let { total, data } = res.data;
				this.total = total;
				this.tableData = data;
				// console.log(res);
			},
			handleSizeChange(size) {
				this.pageSize = size;
				this.getOrderList();
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getOrderList();
			},
			// 查询
			handleOrderList() {
				this.currentPage = 1;
				//把当前formInline的值 拷贝给查询表单使用
				this.formData = { ...this.formInline };
				this.getOrderList();
			},

			// 编辑数据回显
			handleEdit(row){
				// console.log('row',row);
				this.drawerData={...row}
				this.drawer=true
			},
			// 确认修改
			async handleConfirm(){
				const res = await api_order_edit({
					...this.drawerData,
					orderTime:formatYMDhms(this.drawerData.orderTime),
					deliveryTime:formatYMDhms(this.drawerData.deliveryTime)
				})
				if(res.data.code==0){
					this.drawer=false;
					this.getOrderList();
				}
				// console.log(res);
			},
			handleClick(id){
				this.$router.push(`order/details/${id}`)
			}
		},
	};
</script>

<style lang="scss" scoped>
.el-input{
	width: 300px;
}
</style>
